<template>
  <div style="height: 100%">
    <!-- 如果是单点登录的系统，则用此组件并删除表单登录相关代码 -->
    <PageLoading v-if="clientToken" />
    <!-- 如果是表单登录系统，则用此代码并删除PageLoading组件相关 -->
    <div v-else class="login-page">
      <div class="system-name">{{ systemName }}</div>
      <div class="form-content_wrap common-input">
        <div class="login-type__title">用户登录</div>
        <el-input v-model.trim="loginForm.username" prefix-icon="el-icon-user" type="text" placeholder="请输入用户名" />
        <el-input v-model.trim="loginForm.password" :type="isPwd ? 'password' : 'text'" prefix-icon="el-icon-lock" placeholder="请输入密码">
          <svg-icon slot="suffix" class="show-pwd" :icon-class="isPwd ? 'eye' : 'eye-open'" @click="isPwd = !isPwd" />
        </el-input>
        <VerificationCodeInput :query-form.sync="loginForm" @setPhoneCode="v => (loginForm.checkCode = v)" />
        <SlideCircus ref="slideCircus" @handleCheck="e => (verifyStatus = e)" />
        <el-button :loading="loginLoading" type="primary" :class="[{ 'login-btn_fill': isAllowLogin }, 'login-btn']" @click="handleLogin">
          登录
        </el-button>
      </div>
      <div class="footer-wrap">
        xxxxxx有限公司
        <i class="el-icon-phone-outline" />
        服务电话：0571-xxxxx
      </div>
    </div>
  </div>
</template>

<script>
import SlideCircus from './components/SlideCircus';
import PageLoading from './components/PageLoading';
import VerificationCodeInput from './components/VerificationCodeInput';
import { login, getUserInfoByToken } from '@/api/login';
import { setToken, setUserInfo, setUserPermission, removeAll } from '@/utils/cache';
import { filterPerRouter } from '@/utils';
import { systemName } from '@/settings';
import { asyncRoutes } from '@/router';
import md5 from 'js-md5';

export default {
  components: { PageLoading, SlideCircus, VerificationCodeInput },
  data() {
    return {
      isPwd: true,
      systemName,
      loginLoading: false,
      verifyStatus: false,
      clientToken: null,
      loginForm: {
        username: '',
        password: '',
        checkCode: '',
        clientId: 20000
      }
    };
  },
  computed: {
    isAllowLogin() {
      const { username, password, checkCode } = this.loginForm;
      return this.verifyStatus && username && password && checkCode;
    }
  },
  created() {
    removeAll();
    const { token, access_token, accessToken } = this.$route.query;
    this.clientToken = token || access_token || accessToken;
    if (this.clientToken) {
      this.loginByYhzxToken(this.clientToken);
    }
  },
  methods: {
    handleLogin() {
      // ## 测试
      this.clientToken = 'abc123456';
      setTimeout(() => {
        setToken('abc123456');
        setUserPermission([1, 2]);
        this.filterRouters([1, 2]);
      }, 500);
      // ## 测试

      // if (this.isAllowLogin) {
      //   this.loginLoading = true;
      //   login({
      //     ...this.loginForm,
      //     password: md5(this.loginForm.password)
      //   }).then(async({ success, value }) => {
      //     if (success && value) {
      //       const { token, auths, userVo } = value;
      //       setToken(token);
      //       setUserInfo(userVo);
      //       this.filterRouters(auths);
      //     } else {
      //       this.$refs.slideCircus.reset();
      //       this.verifyStatus = false;
      //       this.loginLoading = false;
      //       removeAll();
      //     }
      //   });
      // }
    },
    loginByYhzxToken(accessToken) {
      setToken(accessToken);
      const yhzxUrl = `${window.location.origin}/nbjk-yhzx-web/#/`;
      sessionStorage.setItem('yhzx_url', yhzxUrl);
      getUserInfoByToken({ accessToken }).then(async({ success, value }) => {
        if (success && value) {
          const { menuIds, userVo } = value;
          setUserInfo(userVo);
          this.filterRouters(menuIds);
        } else {
          removeAll();
          if (process.env.NODE_ENV !== 'development') {
            window.location.href = yhzxUrl;
          }
        }
      });
    },
    filterRouters(auths) {
      const currentUserRouter = filterPerRouter(asyncRoutes, auths);
      if (currentUserRouter.length) {
        setUserPermission(auths);
        const defaultModule = currentUserRouter[0];
        if (defaultModule.children && defaultModule.children.length) {
          if (defaultModule.path === '/') {
            if (defaultModule.children[0].path === '/') {
              this.$router.push('/');
            } else {
              this.$router.push('/' + defaultModule.children[0].path);
            }
          } else {
            this.$router.push(defaultModule.path + '/' + defaultModule.children[0].path);
          }
        } else {
          this.$router.push(defaultModule.path);
        }
      } else {
        this.$notify({
          title: '无权限',
          message: '您暂无权限访问本系统',
          type: 'error'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width:1600px) {
  .form-content_wrap {
    right: 10% !important;
  }
}
@media screen and (max-width:1000px) {
  .form-content_wrap {
    right: 50% !important;
    transform: translateX(50%);
  }
}
.login-page {
  height: 100%;
  height: 100%;
  min-height: 680px;
  position: relative;
  // background-image: url('../../assets/imgs/login_bg.png');
  background-color: rgba(53, 85, 128, 1);
  background-size: 100% 100%;
  .el-input {
    margin-bottom: 10px;
  }
  .form-content_wrap {
    width: 380px;
    background-color: #fff;
    padding: 14px 20px 30px;
    position: absolute;
    right: 19%;
    top: 28%;
    border-radius: 6px;
  }
  .login-type__title {
    color: #1c8be4;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
  }

  .system-name {
    width: 100%;
    position: absolute;
    top: 8%;
    font-size: 40px;
    color: #fff;
    text-align: center;
  }

  .login-btn {
    width: 100%;
    height: 40px;
    box-shadow: none;
    border-radius: 1px;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 24px;
    opacity: 0.5;
    cursor: not-allowed;
  }

  .login-btn_fill {
    cursor: pointer;
    opacity: 1;
  }
  .footer-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    i {
      margin-left: 10px;
      margin-right: 2px;
    }
  }
}
</style>
